{% extends "layout.html" %}

{% block content %}
<div class="nested-container">

    {% if session["current_labelannotation_job"] %}
    <a class="btn btn-outline-info mb-3" href="{{ url_for('labelannotation.labelannotationmetrics', job_id=session['current_labelannotation_job']) }}">↩ <i><b>Back to Label Annotation Summary Page</b></i></a>
    {% endif %}

    <h2>Label Annotation Viewer</h2>

    <div class="d-flex justify-content-between align-items-center">
        <h4 class="mb-0">Report {{ report_number }}/{{ total_reports }}: {{ report_id }}</h4>
        {% if report_dict %}
        <button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMetadata"
            aria-expanded="false" aria-controls="collapseMetadata">
            Metadata
        </button>
        {% endif %}
    </div>

    {% if report_dict %}
    <div class="collapse" id="collapseMetadata">
        <div class="card card-body">
            <pre>{{ report_dict['metadata'] }}</pre>
        </div>
    </div>    

    <div class="card mt-3 mb-3">

        <div class="d-flex justify-content-between align-items-center card-header">
            <h3 class="card-title">Metrics</h3>
            <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseConfMat" aria-expanded="false" aria-controls="collapseConfMat">
                <span style="vertical-align: middle;">Confusion Matrix</span> <span
                    style="vertical-align: middle;">▦</span>
            </button>

        </div>

        <div class="card-body shadow-sm">

            <div class="collapse" id="collapseConfMat">
                <!-- <div class="card card-body">
                    <img src="#" class="img"
                        height="300px">
                </div> -->
                <div class="card card-bodyalert alert-warning" role="alert">
                Not yet implemented 😢
                </div>
            </div>

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"
                        type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">All
                        Annotations</button>
                </li>
                {% for key, value in report_dict['metrics']['label_wise'].items() if key != 'personal_info_list' %}
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="scores-tab-{{ key }}" data-bs-toggle="tab"
                        data-bs-target="#scores-tab-{{ key }}-pane" type="button" role="tab"
                        aria-controls="scores-tab-{{ key }}-pane" aria-selected="false">{{ key }}</button>
                </li>
                {% endfor %}
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active pt-3" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab"
                    tabindex="0">
                    <div class="btn-group">
                        {% for key, value in report_dict['metrics']['overall'].items() %}
                        {% if key == 'fn' %}
                        {% if value == 0 %}
                        <button type="button" class="btn btn-success">{{ key }}: {{ value }}</button>
                        {% else %}
                        <button type="button" class="btn btn-danger">{{ key }}: {{ value }}</button>
                        {% endif %}
                        {% else %}
                        <button type="button" class="btn btn-secondary" disabled>{{ key }}: {{ value }}</button>
                        {% endif %}
                        {% endfor %}
                    </div>

                    <table class="table table-bordered table-hover mt-3">
                        <thead>
                            <tr>
                                <th scope="col">Label</th>
                                <th scope="col">LLM Output</th>
                                <th scope="col">Annotation</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for label, value in report_dict['llm_output_labels'].items() %}
                            <tr>
                                <th scope="row">{{ label }}</td>
                                    {% if label_type_mapping[label]['label_type'] == 'boolean' %}
                                        {% set value_bool = value in [1, '1', True, 'True', 'true'] %}
                                        {% set label_bool = report_dict['annotation_labels'][label] in [1, '1', True, 'True', 'true'] %}
                                        {% if value_bool == label_bool %}
                                            <td class="bg-success-subtle">{{ value }}</td>
                                            <td class="bg-success-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                        {% else %}
                                            <td class="bg-danger-subtle">{{ value }}</td>
                                            <td class="bg-dark-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                        {% endif %}
                                    {% else %}
                                    {% if value|lower == report_dict['annotation_labels'][label]|lower %}
                                        <td class="bg-success-subtle">{{ value }}</td>
                                        <td class="bg-success-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                        {% else %}
                                        <td class="bg-danger-subtle">{{ value }}</td>
                                        <td class="bg-dark-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                        {% endif %}
                                    {% endif %}
                                    
                                
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% for label, value in report_dict['metrics']['label_wise'].items() %}

                <div class="tab-pane fade pt-3" id="scores-tab-{{ label }}-pane" role="tabpanel"
                    aria-labelledby="scores-tab-{{ label }}" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3></h3>
                        <div>
                            <span class="badge rounded-pill text-bg-primary">{{ label_type_mapping[label]['label_type'] }}</span>
                        </div>
                    </div>
                    {% if label_type_mapping[label]['label_type'] == 'boolean' %}
                    <div class="btn-group">
                        {% for key, value in report_dict['metrics']['label_wise'][label].items() if key in ['accuracy', 'f1', 'precision', 'recall', 'false_positive_rate', 'false_negative_rate'] %}
                        <button type="button" class="btn btn-secondary" disabled>{{ key }}: {{ value }}</button>
                        {% endfor %}
                    </div>
                    {% elif label_type_mapping[label]['label_type'] == 'multiclass' %}
                    <div class="btn-group">
                        {% for key, value in report_dict['metrics']['label_wise'][label].items() if key in ['accuracy', 'f1', 'precision', 'recall'] %}
                        <button type="button" class="btn btn-secondary" disabled>{{ key }}: {{ value }}</button>
                        {% endfor %}
                    </div>
                    {% elif label_type_mapping[label]['label_type'] == 'stringmatch' %}
                    <div class="btn-group">
                        {% for key, value in report_dict['metrics']['label_wise'][label].items() if key in ['accuracy'] %}
                        <button type="button" class="btn btn-secondary" disabled>{{ key }}: {{ value }}</button>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <table class="table table-bordered table-hover mt-3">
                        <thead>
                            <tr>
                                <th scope="col">Label</th>
                                <th scope="col">LLM Output</th>
                                <th scope="col">Annotation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">{{ label }}</td>

                                    {% if label_type_mapping[label]['label_type'] == 'boolean' %}

                                
                                {% set llm_output_bool = report_dict['llm_output_labels'][label]|lower in [1, '1', True, 'True', 'true', 'yes', 'y', 'ja'] %}
                                {% set annotation_bool = report_dict['annotation_labels'][label]|lower in [1, '1', True, 'True', 'true', 'yes', 'y', 'ja'] %}
                                {% if llm_output_bool == annotation_bool %}
                                    <td class="bg-success-subtle">{{ report_dict['llm_output_labels'][label] }}</td>
                                    <td class="bg-success-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                {% else %}
                                    <td class="bg-danger-subtle">{{ report_dict['llm_output_labels'][label] }}</td>
                                    <td class="bg-dark-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                {% endif %}
                                    
                                {%else%}
                                
                                {% if report_dict['llm_output_labels'][label] == report_dict['annotation_labels'][label] %}
                                <td class="bg-success-subtle">{{ report_dict['llm_output_labels'][label] }}</td>
                                <td class="bg-success-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                {% else %}
                                <td class="bg-danger-subtle">{{ report_dict['llm_output_labels'][label] }}</td>
                                <td class="bg-dark-subtle">{{ report_dict['annotation_labels'][label] }}</td>
                                {% endif %}

                                {% endif %}
                                
                            </tr>
                        </tbody>
                    </table>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <div class="navigation-buttons">
        {% if previous_id %}
        <a href="{{ url_for('labelannotation.labelannotationviewer', report_id=previous_id) }}"
            class="btn btn-secondary float-left">❮ Previous Report</a>
        {% endif %}
        {% if next_id %}
        <a href="{{ url_for('labelannotation.labelannotationviewer', report_id=next_id) }}"
            class="btn btn-secondary float-right">Next Report ❯</a>
        {% endif %}
        <div class="clearfix"></div>
    </div>
    <div class="pdf-container">
        <div class="pdf-viewer shadow-sm">
            <h3>PDF Document</h3>
            <iframe src="{{ url_for('labelannotation.labelannotationpdfprovider', report_id=report_id) }}" height="800px" frameborder="0"
                width="100%"></iframe>
        </div>
    </div>


</div>


<style>
    .pdf-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .pdf-viewer {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .pdf-viewer-2 {
        width: 48%;
        /* Adjust width to accommodate spacing */
        padding: 10px;
        /* Add spacing between iframes */
        border: 1px solid #ccc;
    }

    .pdf-viewer-3 {
        width: 32%;
        /* Adjust width to accommodate spacing */
        padding: 10px;
        /* Add spacing between iframes */
        border: 1px solid #ccc;
    }

    .pdf-viewer iframe {
        width: 100%;
    }

    .navigation-buttons {
        margin-bottom: 20px;
    }

    .clearfix {
        clear: both;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .report-number {
        display: inline-block;
        margin: 0 10px;
    }

    .personal-info-list {
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .container-custom {
        max-width: 95%;
    }

    .nested-container {
        position: absolute;
        left: 50%;
        /* Position the left edge of the container at the horizontal center */
        transform: translateX(-50%);
        /* Move the container to the left by half of its width */
        width: calc(90vw - 30px);
        padding: 30px 15px;
    }
</style>

{% endblock %}